<template>
	<el-main>
		<el-card shadow="never">
			<el-tabs tab-position="top">
				<el-tab-pane label="网站设置">
					<div class="settings-container">
						<el-form ref="form" :model="form" label-width="100px" class="form-container">
							<el-form-item label="网站名称">
								<el-input v-model="form.name" style="width:200px;"></el-input>
							</el-form-item>
							<el-form-item label="网站LOGO" prop="logo">
								<el-space wrap :size="8">
									<sc-upload v-model="form.logo" icon="el-icon-plus" title="上传图片"></sc-upload>
								</el-space>
							</el-form-item>
							<el-form-item label="域名">
								<el-input v-model="form.domain" style="width:200px;"></el-input>
							</el-form-item>
							<el-form-item label="WS设置" prop="ws_type">
								<el-radio-group v-model="form.ws_type">
									<el-radio :label="1">ws</el-radio>
									<el-radio :label="2">wss</el-radio>
								</el-radio-group>
							</el-form-item>
							<el-form-item label="授权秘钥">
								<el-input v-model="form.secret_key" style="width:200px;"></el-input>
							</el-form-item>
							<el-form-item>
								<el-button type="primary" @click="submit()">保存</el-button>
							</el-form-item>
						</el-form>
						<div v-if="form.ws_type == 2" class="wss-config-container">
							<h3>请按以下步骤设置wss</h3>
							<p class="step">1. 按图示的步骤点击</p>
							
							<img src="/static/wss_1.png" alt="wss配置示例" class="wss-image" @click="showImage('/static/wss_d_1.png')">
							<img src="/static/wss_2.png" alt="wss配置示例" class="wss-image" @click="showImage('/static/wss_2.png')">
							<p class="step">2. 将以下代码粘贴到图4的位置</p>
							<div class="code-container">
								<pre v-html="formattedWssConfig" class="hljs"></pre>
								<el-tooltip content="复制到剪贴板" placement="top">
									<el-button class="copy-button" icon="el-icon-document-copy" @click="copyToClipboard(wssConfig)"></el-button>
								</el-tooltip>
							</div>
						</div>
					</div>
				</el-tab-pane>
			</el-tabs>
		</el-card>
		<el-dialog v-model="showImages.is_show"  width="50%" >
			<img :src="showImages.img_url" alt="wss配置示例" class="dialog-image">
		</el-dialog>
	</el-main>
</template>

<script>
	import hljs from 'highlight.js';
	import 'highlight.js/styles/github.css'; // 你可以选择其他样式

	export default {
		name: 'system',
		data() {
			return {
				form: {
					ws_type: '1'
				},
				ws_type: 1, //当前ws类型
				wssConfig: '',
				formattedWssConfig: '',
				
				showImages:{
					is_show:false,
					img_url:''
				}
			}
		},
		mounted() {
			this.getsetting();
			this.generateWssConfig();
		},
		methods: {
			//获取列表
			async getsetting() {
				var res = await this.$API.server.setting.lists.get(this.search)
				if (res.code == 200) {
					this.form = res.data.rows[0];
					this.ws_type = this.form.ws_type;

				} else {
					this.$alert(res.message, "提示", { type: 'error' }).catch(() => { })
				}
			},
			async submit() {
				var res = await this.$API.server.setting.edit.post(this.form);
				if (res.code == 200) {
					var confingS = this.$TOOL.data.get('CONFING_DATA')
					//修改
					Object.assign(confingS, res.data)
					this.$TOOL.data.get('CONFING_DATA', confingS)
					if (this.ws_type != this.form.ws_type) {
						this.$confirm('修改ws设置,需要重新登录？', '提示', {
							type: 'info',
						}).then(() => {
							const loading = this.$loading()
							this.$TOOL.data.clear()
							this.$router.replace({ path: '/login' })
							setTimeout(() => {
								loading.close()
								location.reload()
							}, 1000)
						}).catch(() => {
							//取消
						})
						return false
					}
					this.$message.success("操作成功")
				} else {
					this.$alert(res.message, "提示", { type: 'error' }).catch(() => { })
				}
			},
			copyToClipboard(text) {
				const textarea = document.createElement('textarea');
				textarea.value = text;
				document.body.appendChild(textarea);
				textarea.select();
				document.execCommand('copy');
				document.body.removeChild(textarea);
				this.$message.success('复制成功');
			},
			generateWssConfig() {
				const domain = this.$TOOL.data.get('CONFING_DATA')['domain']+':2345';
				this.wssConfig = `
location ~ /wss{
	proxy_pass ${domain};     
	proxy_http_version 1.1;
	proxy_set_header Upgrade $http_upgrade;
	proxy_set_header Connection "Upgrade";
	proxy_set_header X-Real-IP $remote_addr;
}`;
				this.formattedWssConfig = hljs.highlightAuto(this.wssConfig).value;
			},
			showImage(url){
				this.showImages.is_show = true
				this.showImages.img_url = url
			}
		}
	}
</script>

<style>
.settings-container {
	display: flex;
}
h3{
	font-size: 16px;
	font-weight: bold;
	padding: 15px 0;
}
.form-container {
	flex: 1;
}

.wss-config-container {
	flex: 2;
	margin-left: 20px;
	background-color: #f9f9f9;
	padding: 10px;
	border: 1px solid #ccc;
	border-radius: 4px;
}

.wss-image {
	
	margin-bottom: 10px;
	cursor: pointer; /* 鼠标悬停时显示手型光标 */
}

.code-container {
	position: relative;
	background-color: #f5f5f5;
	border: 1px solid #ddd;
	padding: 10px;
	border-radius: 4px;
}

.copy-button {
	position: absolute;
	top: 10px;
	right: 10px;
	display: none;
}

.code-container .copy-button {
	display: inline-block;
}

pre {
	white-space: pre-wrap; /* 保持换行 */
	font-family: monospace; /* 使用等宽字体 */
	margin: 0;
}

.hljs {
	background: none !important; /* 去除highlight.js的背景色 */
}

.dialog-image {
	max-width: 100%;
	max-height: 100%;
}
.step {
	font-size: 14px;
	font-weight: bold;
	margin: 10px 0;
	color: #333;
}
</style>